// 当前面板
.currentPanel-header {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  .currentPanel-button {
    .apes-btn {
      margin-right: 8px;
    }
  }
}

.currentPanel-list {
  background: white;
  border-radius: 4px;
  float: left;
  overflow: hidden;
  padding: 0;
  margin: 0 0 16px;
}

.currentPanel-title {
  font-size: 18px;
  font-weight: bold;
}

.currentPanel-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.87);
  margin: 16px 8px;
  box-sizing: border-box;
  background: white;
  font-size: 14px;
  list-style: none;
  box-shadow: 0 2px 2px 0 rgba(9, 30, 66, 0.13);
  .currentPanel-box-header {
    cursor: move;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: bold;
    .currentPanel-box-line {
      background: #00a09d;
      height: 6px;
      width: 100%;
    }
    .currentPanel-box-title {
      padding: 8px 16px;
      font-size: 16px;
    }
    //.currentPanel-box-tool {
    //  padding: 8px 16px;
    //  cursor: pointer;
    //  &:hover {
    //    color:#00a09d;
    //  }
    //}
  }
  .currentPanel-box-main {
    padding: 8px 16px;
    position: relative;
  }
}

// 添加小程序弹框
.modal-applet-main {
  display: flex;
  height: 400px;
  .modal-applet-search {
    width: 30%;
  }
  .modal-applet-content {
    width: 70%;
  }
}

// 编辑排版弹框
.modal-compose-main {
  margin: 0;
  padding: 0;
  display: flex;
  li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    .modal-compose-content {
      border: 1px solid #bbb;
      display: block;
      margin: 0 1em 1em 0;
      outline: none;
      padding: .35em;
      width: auto;
      .layout-main {
        background: #fff url('assets/tmp/img/applet/sprite-layouts.png') no-repeat 0 0;
        cursor: pointer;
        display: block;
        height: 37px;
        text-indent: -9999px;
        width: 68px;
      }
      &:hover, &.active {
        border-color: #666;
        .layout-a {
          background-position: -72px -1px;
        }
        .layout-aa {
          background-position: -72px -41px;
        }
        .layout-ba {
          background-position: -72px -82px;
        }
        .layout-ab {
          background-position: -72px -122px;
        }
        .layout-aaa {
          background-position: -72px -163px;
        }
      }
      .layout-a {
        background-position: 0 0;
      }
      .layout-aa {
        background-position: 0 -41px;
      }
      .layout-ba {
        background-position: 0 -82px;
      }
      .layout-ab {
        background-position: 0 -123px;
      }
      .layout-aaa {
        background-position: 0 -163px;
      }
    }
  }
}

// 拖拽框
.special {
  border: 2px dashed #C1C7D0;
  border-radius: 4px;
  color: #8993A4;
  font-size: 16px;
  min-height: 100px;
  padding: 20px;
  margin: 16px 8px;
  text-align: center;
}

// 拖拽层
.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.currentPanel-list.cdk-drop-list-dragging .currentPanel-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.currentPanel-custom-placeholder {
  border: 2px dashed #c1c7d0;
  text-align: center;
  border-radius: 4px;
  color: #8993a4;
  font-size: 16px;
  min-height: 100px;
  padding: 20px;
  margin: 16px 8px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
